<html>

<head>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> -->
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <!-- <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> -->

    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/css/zui.min.css">
    <!-- ZUI Javascript 依赖 jQuery -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/lib/jquery/jquery.js"></script> -->
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/js/zui.min.js"></script>
    <script>
        /*
            搞定分页加载，搜索，ajax请求后端数据
        */
        $(document).ready(function () {
            $('#myTable').DataTable({
                // data: dataSet,
                "pagingType":   "full_numbers",
                "ajax": "/jsono",
                // dataSrc: 'data',
                "language": {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": "没有找到记录",
                    "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤)",
                    "paginate": {
                        "first": "开始",
                        "last": "结束",
                        "next": "下一页",
                        "previous": "Previous"
                    }
                },
                "columns": [
                    { "data": "name" },
                    { "data": "position" },
                    { "data": "office" },
                    { "data": "extn" },
                    { "data": "start_date" },
                    { "data": "salary" }
                ]
            });
        });

    </script>
</head>

<body>
    <table id="myTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>

    </table>
</body>

</html>